<template>
    <div class="homepage" v-infinite-scroll="load" infinite-scroll-distance="3" style="overflow: auto;width: 100%;background-color: #F2F6FC;">
        <div class="header">
            <el-link :underline="false" class="label" type="info"  @click="jump_url('/')"><i
                    class="el-icon-s-home"></i>首页</el-link>
            <el-link :underline="false" class="label" type="info" @click="jump(1)"><i class="el-icon-s-custom"></i>客服</el-link>
            <el-link :underline="false" class="label" type="info" @click="jump(2)"><i class="el-icon-question"></i>详情</el-link>
            <el-link :underline="false" class="label" type="info" @click="jump(3)"><i class="el-icon-coin"></i>会员</el-link>
            <div style="width: 30%;height:50%;;display: inline-block;margin: 1%;display: flex;justify-content: center; align-items: center; " >
                <el-input :placeholder="input_placeholder" v-model="search" @keyup.enter.native="jump(5)"><el-link :underline="false" slot="suffix" class="el-icon-search"
                        style="font-size: 150%;margin-top: 10px;margin-right: 10px;" @click="jump(5)"></el-link></el-input>
            </div>
            <div class="if">
                <div class="avatar" v-if="userlogin"  @click="jump(4)">
                    <el-dropdown placement="bottom">
                        <el-avatar :size="50" class="el-dropdown-link" :src="user.avatar_url"></el-avatar>
                        <el-dropdown-menu slot="dropdown" class="dropdown_menu">
                            <div style="text-align: center;font-size: 150%;margin-top: 20px;">{{ user.name }}</div>
                            <div style="height: 80px;">
                                <div class="userinfo">
                                    <el-link :underline="false" @click="jump_url('/follow')">
                                        <div style="font-size: 150%;">{{ user.Follow }}</div>
                                        <div>关注</div>
                                    </el-link>
                                </div>
                                <div class="userinfo">
                                    <el-link :underline="false" @click="jump_url('/fans')">
                                        <div style="font-size: 150%;">{{ user.Fans }}</div>
                                        <div>粉丝</div>
                                    </el-link>
                                </div>
                                <div class="userinfo">
                                    <el-link :underline="false" @click="jump_url('/release')">
                                        <div style="font-size: 150%;">{{ user.dynamic }}</div>
                                        <div>动态</div>
                                    </el-link>
                                </div>
                            </div>
                            <div class="vip" @click="jump(3)">
                                <div class="advertisement">
                                    超级会员×武汉工程大学学生证开通VIP服务
                                </div>
                                <div style="float: left;">
                                    <div class="buttton_kaitong">
                                        立刻开通
                                    </div>
                                </div>
                            </div>
                            <div class="dro_item" @click="jump_url('/person')">
                                <el-dropdown-item><i class="el-icon-user-solid"></i>个人中心<div style="float: right;">></div>
                                </el-dropdown-item>
                            </div>
                            <div class="dro_item" @click="jump(6)">
                                <el-dropdown-item><i class="el-icon-s-goods"></i>投稿管理<div style="float: right;">></div>
                                </el-dropdown-item>
                            </div>
                            <div class="dro_item" @click="jump(3)">
                                <el-dropdown-item><i class="el-icon-star-on"></i>推荐服务<div style="float: right;">></div>
                                </el-dropdown-item>
                            </div>
                            <hr>
                            <div class="dro_item" @click="Logoutoflogin()">
                                <el-dropdown-item><i class="el-icon-key"></i>退出登录</el-dropdown-item>
                            </div>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div v-if="!userlogin" style="display: flex;justify-content: center; align-items: center; ">
                    <el-link :underline="false" class="login" @click="jump_url('/login')">登录</el-link>
                    <el-link :underline="false" class="login" @click="jump_url('/register')">注册</el-link>
                </div>
            </div>

            <el-link :underline="false" class="label" type="info" @click="jump_url('/message')">
                <el-badge :value="badge" class="item" :max="99" :hidden="badge==0">
                    <div class="icon"><i class="el-icon-s-comment"></i></div>
                    <div>消息</div>
                </el-badge>
            </el-link>
            <el-link :underline="false" class="label" type="info" @click="jump_url('/collect')">
                <div class="icon"><i class="el-icon-star-off"></i></div>
                <div>收藏</div>
            </el-link>
            <el-link :underline="false" class="label" type="info" @click="jump_url('/history')">
                <div class="icon"><i class="el-icon-time"></i></div>
                <div>历史</div>
            </el-link>
            <el-button type="danger" class="label"  @click="jump(6)"><i class="el-icon-upload2"
                    ></i>投稿</el-button>
        </div>
        <div class="classification">
            <div class="cla1">
                <div class="ava" @click="jump_url('/release')">
                    <el-avatar :size="50" style="background-color: rgb(45, 90, 188);"><i class="el-icon-cloudy"
                            style="font-size: 170%;margin-top: 27%;margin-left: 5%;"></i></el-avatar>
                    <div style="text-align: center;">动态</div>
                </div>
                <div class="ava" @click="jump_url('/person')">
                    <el-avatar :size="50" style="background-color: rgb(255, 0, 93);"><i class="el-icon-s-opportunity"
                            style="font-size: 170%;margin-top: 27%;margin-left: 5%;"></i></el-avatar>
                    <div style="text-align: center;">主页</div>
                </div>
                <div class="ava" @click="jump(7)">
                    <el-avatar :size="50" style="background-color: rgb(72, 195, 44);"><i class="el-icon-s-order"
                            style="font-size: 170%;margin-top: 27%;margin-left: 5%;"></i></el-avatar>
                    <div style="text-align: center;">设置</div>
                </div>
            </div>
            <div class="cla2">
                <div v-for="item in items" style="margin: 3%;">
                    <el-button class="tag" @click="jump1(item)">{{ item }}</el-button>
                </div>
                <div style="margin: 3%;">
                    <el-dropdown>
                        <el-button class="tag">更多<i class="el-icon-arrow-down el-dropdown-link"></i></el-button>
                        <el-dropdown-menu slot="dropdown" style="width: 30%; ">
                            <div v-for="item in items_redundant" style="margin: 1%;float: left;">
                                <el-button class="tag1" size="medium " @click="jump1(item)">{{ item }}</el-button>
                            </div>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
            <div class="cla3">
                <div class="f4">
                    <el-link :underline="false" style="font-size: 120%;" @click="jump_url('/privacy')" target="_blank"><i class="el-icon-share"></i>说明 </el-link>
                </div>
                <div class="f4">
                    <el-link :underline="false" style="font-size: 120%;" @click="jump_url('/activity')" target="_blank"><i class="el-icon-s-flag"></i>活动 </el-link>
                </div>
                <div class="f4">
                    <el-link :underline="false" style="font-size: 120%;" @click="jump_url('/service')" target="_blank"><i class="el-icon-document-copy"></i>协议 </el-link>
                </div>
                <div class="f4">
                    <el-link :underline="false" style="font-size: 120%;" @click="jump_url('/contribute')"><i class="el-icon-tickets"></i>创作</el-link>
                </div>
            </div>
        </div>   
        <div class="main">
            <div class="carousel" style="cursor: pointer;">
                <el-carousel trigger="click" height="60vh">
                    <el-carousel-item v-for="item in carousel" :key="item.id" style="display: flex;align-items: center;background-color:black">
                        <el-popover
                        placement="right-start"
                        trigger="hover"
                        :open-delay="200"
                        :content="item.title">
                            <el-image :src="item.cover" referrerPolicy='no-referrer'  slot="reference" @click="router_video(item.id)"
                            fit="fill"></el-image>
                        </el-popover>
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="videomodel">
                <div class="video" v-for="video in video" :key="video.id">
                    <div @click="router_video(video.id)" style="cursor: pointer;height: 65%;width: 100%;">
                        <el-image style="width: 100%; height: 100%;border-radius: 10px" :src="video.cover" referrerPolicy='no-referrer'
                            fit="fill"></el-image>
                    </div>
                    <div class="name">
                        <span class="span" @click="router_video(video.id)">{{ video.title }}</span>
                    </div>
                    <div style="font-size: 80%;color: #606266;margin-top: 5%;">
                        <i class="el-icon-user"></i> {{ video.publisherName }} · {{ video.createTime.slice(0,10) }}
                    </div>
                </div>
            </div>
            
        </div>
        <div style="display: flex;justify-content: center; align-items: center;flex-wrap: wrap;margin-top: 1%;">
            <div style="width: 90%;">
                <div class="video1" v-for="video in videos" :key="video.id">
                    <div  @click="router_video(video.id)" style="cursor: pointer;height: 65%;width: 100%;">
                        <el-image style="width: 100%; height: 100%;border-radius: 10px" :src="video.cover" referrerPolicy='no-referrer'
                            fit="fill"></el-image>
                    </div>
                    <div class="name">
                        <span class="span" @click="router_video(video.id)">{{ video.title }}</span>
                    </div>
                    <div style="font-size: 80%;color: #606266;-webkit-line-clamp: 1;text-overflow: ellipsis;">
                        <i class="el-icon-user"></i> {{ video.publisherName }} · {{ video.createTime.slice(0,10) }}
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script>
import UserChatApi from "@/api/user-chat"
import PersonalCenterApi from "@/api/personal-center"
import UserManagementApi from "@/api/user-management"
import VideoPlayApi from "@/api/video-play"
import VideoSearchApi from "@/api/video-search"
export default {
    data() {
        return {
            search:'',//搜索词条
            userlogin: false,//是否登录,登录为true
            badge: 0,//显示未读消息数
            input_placeholder: '武汉工程大学',//搜索框默认字符
            items: [],//分类表
            items_redundant: [],//分类表多余部分
            user: {
                id: '',
                name: '',
                avatar_url: '',
                Follow: 0,
                Fans: 0,
                dynamic: 0,
            },
            video: [],//视频信息
            videos_index:3,//下拉视频所到页数
            carousel:[],//幻灯片视频信息
            videos:[],//下拉视频信息
            register_user: {//注册时提交的表单
                phone_number: '',
                name: '',
                account: '',
                password: '',
            },
            video_all:[]//所有视频集合 1推荐（id？null   推荐数量>=12？） 2保底（推荐数量<12， 保底显示=12-推荐数量）   3其余
        }
    },
    methods: {
        //跳转到分类视频界面
        jump1(classification){
            var {href} = this.$router.resolve({
                name:'classification',
                query:{
                    classification:classification
                }
            })
            window.open(href,"_blank");
        },
        //跳转到视频页面
        router_video(id){
            var {href} = this.$router.resolve({
                name:'video',
                query:{
                    id:id
                }
            })
            window.open(href,"_blank");
        },
        //退出登录
        Logoutoflogin(){
            sessionStorage.removeItem('token')
            sessionStorage.removeItem('id')
            this.$router.go(0)
        },
        //跳转
        jump(index){
            switch (index) {
                case 1:
                    var {href} = this.$router.resolve('/servise');
                    window.open(href,"_blank");
                    break;
                case 2:
                    var {href} = this.$router.resolve('/service');
                    window.open(href,"_blank");
                    break;
                case 3:
                    var {href} = this.$router.resolve('/recharge');
                    window.open(href,"_blank");
                    break;
                case 4:
                    this.$router.push('/person')
                    break;
                case 5:
                    if(this.search == ''){
                        var {href} = this.$router.resolve({
                            name:'result',
                            query:{
                                search:this.input_placeholder
                            }
                        })
                        window.open(href,"_blank");
                    }else{
                        var {href} = this.$router.resolve({
                            name:'result',
                            query:{
                                search:this.search
                            }
                        })
                        window.open(href,"_blank");
                    }
                    break;
                case 6:
                    var {href} = this.$router.resolve('/contribute');
                    window.open(href,"_blank");
                    break;
                case 7:
                    var {href} = this.$router.resolve('/download');
                    window.open(href,"_blank");
                    break;
                default:
                    break;
            }
        },
        //参数为url的跳转
        jump_url(url){
            var {href} = this.$router.resolve(url);
            window.open(href,"_blank");
        },
        //滚轮下拉出现视频
        load(){
            var _this= this
            //获取首页的视频(SubmitSomeVideo两个参数分别为第几页的几个视频)
            if(_this.userlogin){
                VideoSearchApi.SubmitAlgorithm(_this.videos_index,5).then(res => {
                    if(res.data.code == 200){
                        _this.videos = _this.videos.concat(res.data.data.records)
                    }else{
                        this.$message.error(res.data.code + ':' + res.data.msg);
                    }
                })
            }else{
                VideoSearchApi.SubmitSomeVideo(_this.videos_index,5).then(res => {
                    if(res.data.code == 200){
                        _this.videos = _this.videos.concat(res.data.data.records)
                    }else{
                        this.$message.error(res.data.code + ':' + res.data.msg);
                    }
                })
            }
            _this.videos_index++
        }
    },
    mounted(){
        var that = this
        //获取用户信息
        UserManagementApi.SubmitUser().then(res => {
            if(res.data.code == 200){
                that.userlogin = true
                that.user.id = res.data.data.id
                that.user.name = res.data.data.name
                that.user.avatar_url = res.data.data.avatarUrl
                //获取首页视频（推荐算法）
                VideoSearchApi.SubmitAlgorithm(1,12).then(res1=>{
                    if(res1.data.code==200){
                        var tj=res1.data.data.records
                        //将数组分开
                        // 确保在created或mounted钩子中处理，此时data中的属性已被初始化  
                        const length = tj.length;  
                        const chunkSize = 6; // 你想每部分获取多少条数据  
                    
                        // 将前6条数据放到video数组中  
                        that.video = tj.slice(0, chunkSize);    
                    
                        // 如果video_all中还有剩余数据，则取接下来的6条放到carousel数组中  
                        if (length > chunkSize) {  
                            that.carousel = tj.slice(chunkSize, chunkSize * 2);  
                        }  
                        // 如果还有剩余数据，则将剩余数据放到videos数组中  
                        if (length > chunkSize * 2) {  
                            that.videos = tj.slice(chunkSize * 2);  
                        } 
                    }
                })
                //获取用户关注，粉丝，动态信息
                PersonalCenterApi.SubmitCountById().then(res1 => {
                    if(res1.data.code == 200){
                        that.user.dynamic = res1.data.data.publishCount
                        that.user.Follow = res1.data.data.followCount
                        that.user.Fans = res1.data.data.fansCount
                    }
                })
                //获取用户未读消息数
                UserChatApi.SubmitGetMessageNum().then(res1 => {
                    if(res1.data.code==200){
                        that.badge = res1.data.data
                    }
                })
                
            }else{
                //使用非推荐算法
                VideoSearchApi.SubmitSomeVideo(1,12).then(res1=>{
                    if(res1.data.code==200){
                        var tj=res1.data.data.records
                        //将数组分开
                        // 确保在created或mounted钩子中处理，此时data中的属性已被初始化  
                        const length = tj.length;  
                        const chunkSize = 6; // 你想每部分获取多少条数据  
                    
                        // 将前6条数据放到video数组中  
                        that.video = tj.slice(0, chunkSize);    
                    
                        // 如果video_all中还有剩余数据，则取接下来的6条放到carousel数组中  
                        if (length > chunkSize) {  
                            that.carousel = tj.slice(chunkSize, chunkSize * 2);  
                        }  
                    }
                })
            }
        })
        //获取所有视频类别
        VideoPlayApi.SubmitAllClassification().then(res1 => {
            if(res1.data.code == 200){
                var items = []
                var items2 = []
                res1.data.data.forEach(function(item,index) {
                    if(item.length<3 && items.length<13){
                        items.push(item)
                    }else{
                        items2.push(item)
                    }    
                });
                that.items = items
                that.items_redundant = items2
            }
        })
    },
};
</script>

<style scoped>
@import "../assets/css/body.css";

.homepage {
    height: 100%;
}
.header {
    width: 100%;
    height: 15%;
    background-image: url('../assets/image/首页1.png');
    background-size: cover;
    background-repeat: no-repeat;
    display: flex; /* 启用 Flexbox 布局 */
    justify-content: center; /* 水平居中对齐 */
}

.main {
    width: 100%;
    height: 60%;
    background-color: #F2F6FC;
    display: flex;
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
}

.classification {
    width: 100%;
    height: 23%;
    background-color: #F2F6FC;
    display: flex;
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
}

.label {
    font-size: 110%;
    height: 50%;
    width: 5%;
    margin: 1%;
    display: flex;
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
}

.icon {
    font-size: 120%;
    text-align: center;
}

div /deep/ .el-input__inner {
    background-color: #F2F6FC;
    border-radius: 10px
}

div /deep/ .el-input__inner:hover {
    background-color: white;
}

.avatar {
    float: left;
    margin-top: 15px;
    margin-left: 40%;
    cursor: pointer;
}

.login {
    font-size: 150%;
    margin: 10px;
}

.if {
    width: 9%;
    height: 50%;
    margin-top: 1%;
    display: flex;
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
}

.header /deep/.el-link--inner {
    color: white;
}

.header /deep/.el-link--inner:hover {
    color: #409EFF;
}

.cla1 {
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
}

.cla2 {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    flex-wrap: wrap; /* 允许换行 */
}

.cla3 {
    width: 15%;
    height: 100%;
    display: flex;
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
    flex-wrap: wrap; /* 允许换行 */
}

.ava {
    cursor: pointer;
    margin: 10%;
}

.tag {
    height: 100%;
    width: 100%;
}
.carousel {
    height: 100%;
    width: 40%;
    margin-left: 1%;
    border-radius: 10px;
}
.video {
    margin-left: 1%;
    margin-right: 1%;
    height: 50%;
    width: 31%;
}
.video1{
    margin-left: 1%;
    margin-right: 2%;
    height: 30vh;
    width: 17%;
    float: left;
}
.name {
    height: 13%;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-family: "PingFang SC", "Hiragino Sans GB";
    font-weight: 600;
    font-size:smaller;
    margin-top: 5%;
}
.userinfo {
    float: left;
    text-align: center;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 20px;
}

.dropdown_menu {
    background-color: #EBEEF5;
}

.advertisement {
    float: left;
    width: 50%;
    height: 25px;
    padding: 10px;
    font-size: 80%;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.buttton_kaitong {
    padding: 5px;
    font-size: 80%;
    float: left;
    background-color: #EBEEF5;
    border-radius: 2px;
    margin-top: 10px;
    margin-left: 20px;
}

.vip {
    background-color: rgb(246, 190, 190);
    border-radius: 8px;
    margin-left: 20px;
    margin-right: 20px;
    height: 50px;
    width: 230px;
    cursor: pointer;
}

.dro_item {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
}

div /deep/ .el-dropdown-menu__item {
    border-radius: 5px;
    color: black;
}

div /deep/ .el-dropdown-menu__item:hover {
    color: black;
    background-color: #909399;
}

.f4{
    height: 50%;
    width: 50%;
    display: flex;
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
}

.span:hover{
    color: #409EFF;
    cursor: pointer;
}
.videomodel{
    height: 100%;
    width: 50%;
    display: flex;
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
    flex-wrap: wrap; /* 允许换行 */
}
</style>